import React from 'react';
import {Dimensions, StyleSheet, Text, View} from 'react-native';
import FastImage from 'react-native-fast-image';
import {formatDate, getRealSize, Touchable} from '../../utils';
import {Pie} from 'react-native-progress';
import {UploadState} from '../../components/file-upload';

class ImageMessage extends React.PureComponent {
  render() {
    const {url, date, self, avatar, name, onView, state, rate = 0} = this.props;
    // console.log('rate', rate);
    return (
      <View style={[Styles.container, self && Styles.self]}>
        <View style={Styles.avatar}>
          <FastImage
            style={Styles.avatarImg}
            source={{
              uri: avatar,
              priority: FastImage.priority.normal,
            }}
            resizeMode={FastImage.resizeMode.contain}
          />
        </View>
        <View style={Styles.content}>
          <View style={[Styles.head, self && Styles.self]}>
            <Text style={[Styles.title, self && Styles.self]}>{name}</Text>
            <Text style={[Styles.time, !self && Styles.self]}>
              {formatDate(date, 'YYYY-MM-DD HH:mm')}
            </Text>
          </View>
          <View style={[Styles.card, self && Styles.self]}>
            {state === UploadState.UPLOADING ? (
              <View style={Styles.progress}>
                <Pie progress={Number(rate || 0)} size={getRealSize(42)} />
              </View>
            ) : (
              <Touchable onPress={() => onView()}>
                <FastImage
                  style={Styles.image}
                  source={{
                    uri: url,
                    priority: FastImage.priority.normal,
                  }}
                  resizeMode={FastImage.resizeMode.contain}
                />
              </Touchable>
            )}
          </View>
        </View>
      </View>
    );
  }
}

export default ImageMessage;

const Styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    paddingHorizontal: getRealSize(15),
    paddingBottom: getRealSize(15),
  },
  self: {
    flexDirection: 'row-reverse',
    textAlign: 'right',
  },
  avatarImg: {
    width: getRealSize(32),
    height: getRealSize(32),
    backgroundColor: 'white',
    borderRadius: getRealSize(16),
  },
  avatar: {
    width: getRealSize(38),
  },
  content: {
    paddingHorizontal: getRealSize(12),
    width: Dimensions.get('screen').width * 0.7,
    minHeight: getRealSize(88),
    // backgroundColor: '#333',
  },
  head: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
  },
  title: {
    flex: 1,
    fontSize: getRealSize(12),
    color: '#757575',
    textAlign: 'left',
  },
  time: {
    width: getRealSize(128),
    fontSize: getRealSize(12),
    color: '#757575',
  },
  card: {},
  message: {
    padding: getRealSize(8),
    marginTop: getRealSize(8),
    backgroundColor: 'white',
    // color: '#333',
  },
  selfMessage: {
    textAlign: 'right',
  },
  image: {
    marginTop: getRealSize(8),
    width: getRealSize(88),
    height: getRealSize(88),
    backgroundColor: 'white',
    padding: getRealSize(2),
    borderRadius: getRealSize(4),
  },
  progress: {
    position: 'absolute',
    height: getRealSize(48),
    width: getRealSize(48),
    top: getRealSize(8),
  },
});
